<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>API统计仪表板</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        .dashboard-card {
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        .card-header {
            background-color: #f8f9fa;
            border-bottom: 1px solid #eee;
            padding: 15px;
        }
        .api-stats-item {
            padding: 10px 15px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .api-path {
            font-family: monospace;
            color: #0d6efd;
        }
        .api-count {
            background-color: #e9ecef;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 0.9em;
        }
        .stats-card {
            padding: 1rem;
            border-radius: 8px;
            text-align: center;
            margin-bottom: 1rem;
            color: white;
        }
        .stats-card .number {
            font-size: 2rem;
            font-weight: bold;
        }
        .stats-card .label {
            font-size: 0.9rem;
            opacity: 0.9;
        }
        .success-card {
            background-color: #28a745;
        }
        .error-card {
            background-color: #dc3545;
        }
    </style>
    <script>
        // 加载仪表盘数据
        function loadDashboard() {
            fetch('/api/admin/users')
                .then(response => {
                    if (!response.ok) {
                        throw new Error('加载数据失败');
                    }
                    // 数据加载成功，不需要跳转
                    console.log("加载仪表盘数据成功");
                })
                .catch(error => {
                    console.error('加载数据失败:', error);
                    window.location.href = '/admin/login';
                });
        }

        // 检查认证状态
        function checkAuth() {
            // 直接加载数据，如果失败则说明未认证
            loadDashboard();
        }

        window.onload = checkAuth;
    </script>
</head>
<body class="container py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1><i class="fas fa-chart-line me-2"></i>API统计仪表板</h1>
        <form th:action="@{/admin/logout}" method="post">
            <button type="submit" class="btn btn-outline-danger">
                <i class="fas fa-sign-out-alt me-2"></i>退出登录
            </button>
        </form>
    </div>
    
    <!-- 显示错误信息 -->
    <div th:if="${error}" class="alert alert-danger" role="alert">
        <i class="fas fa-exclamation-circle me-2"></i>
        <span th:text="${error}"></span>
    </div>
    
    <!-- 添加统计卡片 -->
    <div class="row mb-4">
        <div class="col-md-6">
            <div class="stats-card success-card">
                <div class="number" th:text="${successCount}">0</div>
                <div class="label">成功请求</div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="stats-card error-card">
                <div class="number" th:text="${errorCount}">0</div>
                <div class="label">失败请求</div>
            </div>
        </div>
    </div>
    
    <div class="row">
        <!-- API调用统计卡片 -->
        <div class="col-md-6">
            <div class="card dashboard-card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-chart-bar me-2"></i>API调用统计
                    </h5>
                </div>
                <div class="card-body p-0">
                    <div th:if="${#maps.isEmpty(apiStats)}" class="p-3 text-center text-muted">
                        <i class="fas fa-info-circle me-2"></i>暂无API调用数据
                    </div>
                    <div th:unless="${#maps.isEmpty(apiStats)}">
                        <div th:each="stat : ${apiStats}" class="api-stats-item">
                            <span class="api-path" th:text="${stat.key}"></span>
                            <span class="api-count" th:text="${stat.value} + ' 次调用'"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 最近调用日志卡片 -->
        <div class="col-md-6">
            <div class="card dashboard-card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-history me-2"></i>最近调用日志
                    </h5>
                </div>
                <div class="card-body p-0">
                    <div th:if="${recentLogs.isEmpty()}" class="p-3 text-center text-muted">
                        <i class="fas fa-info-circle me-2"></i>暂无调用日志
                    </div>
                    <div th:unless="${recentLogs.isEmpty()}" class="table-responsive">
                        <table class="table table-hover mb-0">
                            <thead>
                                <tr>
                                    <th>路径</th>
                                    <th>方法</th>
                                    <th>状态</th>
                                    <th>响应时间</th>
                                    <th>时间</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr th:each="log : ${recentLogs}">
                                    <td class="api-path" th:text="${log.path}"></td>
                                    <td>
                                        <span class="badge bg-primary" th:text="${log.method}"></span>
                                    </td>
                                    <td>
                                        <span class="badge" 
                                              th:classappend="${log.statusCode < 400 ? 'bg-success' : 'bg-danger'}"
                                              th:text="${log.statusCode}">
                                        </span>
                                    </td>
                                    <td th:text="${log.responseTime + 'ms'}"></td>
                                    <td th:text="${#temporals.format(log.requestTime, 'HH:mm:ss')}"></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap Bundle with Popper -->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
</body>
</html> 